<template>
  <div class="ai-node">
    <div class="line5 ai-node-title">
      <div class="flow-dot" magnet="true" :class="'flow-exec'" x-type="input-exec" :x-id="'input-exec_'+id"></div>
      <div>{{ formData.name }}</div>
      <div class="flow-dot flow-right flow-exec" magnet="true" x-type="output-exec" :x-id="'output-exec_'+id"></div>
    </div>
    <div>
      <div class="line5">
        <div class="flow-dot flow-string" magnet="true" x-type="input-text" :x-id="'input-text_'+id"></div>
        <div>用户输入</div>
      </div>
      <div class="line5">
        <div class="flow-dot flow-array-string" magnet="true" x-type="input-array-string" :x-id="'input-array-string_'+id"></div>
        <div>参考资料</div>
      </div>
      <div class="line5">
        <div class="flow-dot flow-array" magnet="true" x-type="input-context" :x-id="'input-context_'+id"></div>
        <div>上下文</div>
      </div>
      <div class="line5">
        <div class="flow-dot flow-file" magnet="true" x-type="input-files" :x-id="'input-files_'+id"></div>
        <div>多文件</div>
      </div>
      <div class="line5">
        <div class="flow-dot flow-string" magnet="true" x-type="input-fileId" :x-id="'input-fileId_'+id"></div>
        <div>文件ID(算力平台)</div>
      </div>
      <div class="line5 output">
        <div>文本输出</div>
        <div class="flow-dot flow-string" magnet="true" x-type="output-string" :x-id="'output-text_'+id" x-key="text"></div>
      </div>
      <div class="line5 output">
        <div>MCP结果</div>
        <div class="flow-dot flow-array" magnet="true" x-type="output-mcp" :x-id="'output-mcp_'+id" x-key="mcp"></div>
      </div>
      <div class="line5 output">
        <div>写入上下文</div>
        <div class="flow-dot flow-boolean" magnet="true" x-type="output-boolean" :x-id="'output-context_'+id" x-key="context"></div>
      </div>
    </div>
    <el-form
      :model="formData"
      label-position="top"
      @mousedown.stop
      @focus.stop
      style="cursor: default"
    >
      <el-form-item label="节点名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="模型" prop="modelId">
        <el-select v-model="formData.modelId" placeholder="请选择模型" clearable>
          <el-option
            v-for="model in models"
            :key="model.id"
            :label="model.name"
            :value="model.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="格式化输出" prop="useJson">
        <el-switch v-model="formData.useJson" />
      </el-form-item>
      <el-form-item label="联网搜索" prop="enableSearch">
        <el-switch v-model="formData.enableSearch" />
      </el-form-item>
      <el-form-item label="提示词" prop="prompt">
        <el-input
          type="textarea"
          v-model="formData.prompt"
          :autosize="{ minRows: 3, maxRows: 5 }"
          @mousedown.stop
        />
      </el-form-item>
      <el-collapse>
        <el-collapse-item title="高级配置" name="height_config">
          <el-form-item label="上下文长度" prop="contextSize">
            <el-input-number
              style="width: 100%"
              :min="1"
              :max="30"
              v-model="formData.contextSize"
              controls-position="right"
            />
          </el-form-item>
          <el-form-item label="温度" prop="temperature">
            <el-slider style="padding: 0 15px" :min="0.1" :max="1" :step="0.1" v-model="formData.temperature" />
          </el-form-item>
          <el-form-item label="top_p" prop="topP">
            <el-slider style="padding: 0 15px" :min="0.1" :max="1" :step="0.1" v-model="formData.topP" />
          </el-form-item>
          <el-form-item label="格式化例子" v-if="formData.useJson" prop="jsonDemo">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 5 }"
              v-model="formData.jsonDemo"
            />
          </el-form-item>
          <el-form-item label="MCP">
            <el-input-tag placeholder="请输入MCP编码" v-model="formData.mcpGroupCode"/>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>
<script setup lang="ts">
// 获得下拉数据
import { ModelApi, ModelVO } from '@/api/ai/model/model'
import { AiModelTypeEnum } from '@/views/ai/utils/constants'
import {inject, ref} from "vue";
import {Node} from "@antv/x6";

const formData = reactive<any>({
  contextSize: 12,
  temperature: 0.7,
  topP: 0.7,
  useJson: false,
  jsonDemo: '',
  name: '语言模型调用',
  prompt:undefined,
  mcpGroupCode:undefined,
  enableSearch:true,
})
const models = ref([] as ModelVO[])
const init = async () => {
  models.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.CHAT)
}
const id=ref<string>()
const getNode=inject<()=>Node>('getNode')
if(getNode){
  const node=getNode()
  id.value=node.id
}
onBeforeMount(()=>{
  if(getNode){
    const node=getNode()
    const d=node.getData()
    if (d){
      Object.assign(formData,d)
    }else {
      node.setData(formData)
    }
  }
})
onMounted(() => {
  init()
})
watch(formData,()=>{
  if(getNode){
    const node=getNode()
    //console.log('node.setData',node,formData)
    node.setData(formData,{deep:true,overwrite:true})
  }
},{deep:true,immediate:false})
</script>
<style scoped lang="scss">
.ai-node {
  width: 400px;
  background-color: white;
  display: flex;
  padding: 10px;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #9f9f9f;
  gap: 5px;
  .ai-node-title{
    height: 32px;
  }
}
</style>
